<template>
    <div class="my">
        <div class="top_box">
            <div class="log_box">
                <i class="sao"></i>
                <div>切换用户</div>
            </div>
            <div class="avatar_box">
                <div class="img_box">
                    <img src="@/assets/tx.jpg" alt="" />
                </div>
                <p>小叶南洋杉</p>
            </div>
            <div class="welfare">
                <p>福利中心</p>
                <div class="arrowhead"></div>
            </div>
        </div>

        <div class="options">
            <i class="yuedu"></i>
            <p>阅读活动</p>
            <div class="arrowhead"></div>
        </div>
        <div class="line"></div>

        <div class="options">
            <i class="zhanghu"></i>
            <p>账户</p>
            <div class="arrowhead"></div>
        </div>
        <div class="options">
            <i class="zengshu"></i>
            <p>赠书记录</p>
            <div class="arrowhead"></div>
        </div>
        <div class="line"></div>

        <div class="options">
            <i class="xiaoxi"></i>
            <p>消息</p>
            <div class="arrowhead"></div>
        </div>
        <div class="line"></div>

        <div class="options">
            <i class="biji"></i>
            <p>笔记</p>
            <div class="arrowhead"></div>
        </div>
        <div class="options">
            <i class="jilu"></i>
            <p>阅读记录</p>
            <div class="arrowhead"></div>
        </div>
        <div class="line"></div>

        <div class="options">
            <i class="lika"></i>
            <p>礼卡</p>
            <div class="arrowhead"></div>
        </div>
        <div class="line"></div>

        <div class="options">
            <i class="shezhi"></i>
            <p>设置</p>
            <div class="arrowhead"></div>
        </div>
        <div class="options">
            <i class="fankui"></i>
            <p>帮助与反馈</p>
            <div class="arrowhead"></div>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.my {
    width: 100%;
    margin-bottom: 70px;

    .arrowhead {
        width: 10px;
        height: 10px;
        border-right: 2px solid #999;
        border-bottom: 2px solid #999;
        transform: rotate(-45deg);
    }
    .top_box {
        height: 210px;
        position: relative;
        padding: 10px 10px;
        background-image: url(@/assets/beijing.jpg);
        background-repeat: no-repeat;
        background-size: 100%;

        .log_box {
            display: flex;
            justify-content: space-between;
            align-items: center;

            div {
                font-size: 14px;
                color: #909090;
            }
            .sao {
                background-image: url(@/assets/saoyisao.png);
                background-repeat: no-repeat;
                background-size: 100%;
            }
        }
        i {
            // background-color: red;
            display: block;
            width: 15px;
            height: 15px;
        }

        // border: 1px solid #000;
        .avatar_box {
            width: 25%;
            margin: 30px auto 0;
            .img_box {
                // background-color: red;
                width: 80%;
                height: 71px;
                margin: 0 auto;
                img {
                    border-radius: 50%;
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                margin-top: 10px;
                width: 100%;
                text-align: center;
                font-size: 14px;
                color: #313131;
            }
        }

        .welfare {
            background: rgba(#ffc388, 0.1);
            width: 100%;
            height: 40px;
            padding: 0 10px;
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;

            p {
                color: #ffc388;
                font-size: 14px;
            }
        }
    }

    .options {
        // border: 1px solid #000;
        width: 100%;
        height: 45px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
            font-size: 14px;
            margin-left: 10px;
            flex: 1;
        }

        i {
            display: block;
            width: 20px;
            height: 20px;
            // background: #000;
            background-repeat: no-repeat;
            background-size: 100%;
        }
    }

    .line {
        width: 100%;
        height: 5px;
        background: #f6f6f6;
    }

    .yuedu {
        background-image: url(@/assets/yuedu.png);
    }
    .zhanghu {
        background-image: url(@/assets/zhanghu.png);
    }
    .zengshu {
        background-image: url(@/assets/zengshu.png);
    }
    .xiaoxi {
        background-image: url(@/assets/xiaoxi.png);
    }
    .biji {
        background-image: url(@/assets/biji.png);
    }
    .jilu {
        background-image: url(@/assets/jilu.png);
    }
    .lika {
        background-image: url(@/assets/lika.png);
    }
    .shezhi {
        background-image: url(@/assets/shezhi.png);
    }
    .fankui {
        background-image: url(@/assets/fankui.png);
    }
}
</style>
